<template>
    <div class="content">
        <el-table class="content-list" border :data="contents.list" style="width: 100%">
            <el-table-column label="首页图片" width="100">
                <template #default="scope">
                    <el-image
                        style="width: 50px; height: 50px"
                        :hide-on-click-modal="true"
                        :preview-teleported="true"
                        :preview-src-list="[scope.row.images[0] ? prefixUrl + scope.row.images[0].path:'']"
                        :src="
                            scope.row.images[0] ? prefixUrl + scope.row.images[0].path : ''
                        "
                        fit="contain"
                    />
                </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" width="200"/>
            <el-table-column label="内容" width="200">
                <template #default="scope">
                    <el-text truncated>{{ scope.row.text }}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="类别" width="100">
                <template #default="scope">
                    <el-text>{{ scope.row.type.name }}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="状态" width="100">
                <template #default="scope">
                    <el-tag
                    v-if="scope.row.status.id == 1003"
                    type="info"
                    disable-transitions>已下线</el-tag>
                    <el-tag
                    v-else
                    type="success"
                    disable-transitions>正常</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button
                        type="primary"
                        size="small"
                        @click="handleEdit(scope.row.id)"
                        >修改</el-button
                    >
                    <el-button size="small" :disabled="scope.row.status.id == 1002"
                        @click="handleUpdateStatus(scope.row.id,1002)"
                        >上架</el-button
                    >
                    <el-button size="small" :disabled="scope.row.status.id == 1003"
                        @click="handleUpdateStatus(scope.row.id,1003)"
                        >下架</el-button
                    >
                    <el-button size="small" type="danger" 
                        @click="handleDelete(scope.row.id)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            v-model:current-page="contents.pageNum"
            v-model:page-size="contents.pageSize"
            :total="contents.total"
            @current-change="handleCurrentChange"
        />
    </div>
</template>
<script setup>
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { storeToRefs } from "pinia";
import { defineProps,defineEmits } from "vue";
import { url,staticUrl } from "@/services";
import { updateContentStatus,deleteContent } from "@/services/content";
import { useContentStore } from "@/stores/content";
const contentStore = useContentStore();;
const {setUpdateDialogVisible,fetchContentById,fetchContents} = contentStore;
const {contents} = storeToRefs(contentStore);
const prefixUrl = ref(staticUrl);
// import { useStudentStore } from '../../stores/student';

// const props = defineProps(["data"]);
const emit = defineEmits(['show']);
function handleCurrentChange(val){
    // emit('show',{current:val});
    fetchContents({current:val});
    
}
function handleEdit(id) {
    // setUpdateVisible(true);
    // fetchStudent(id);
    setUpdateDialogVisible(true);
    fetchContentById(id);

}
function handleDelete(id){
    ElMessageBox.confirm("删除图文内容会将关联的轮播以及图片一并删除，是否确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(async () => {
        await deleteContent(id);
        fetchContents({current:1});
    });
}
async function handleUpdateStatus(id, status) {
    
    await updateContentStatus(id, status);
    // emit('show',{current:props.data.current});
    
    fetchContents({current:contents.value.pageNum});
}
</script>
<style>
.content {
    padding-bottom: 50px;
}
.content-list {
    /* margin-top: 25px; */
    margin-bottom: 15px;
}
</style>
